<template>
	<view class="order">
		<u-sticky>
			<view class="Tab-btn">
				<u-tabs lineColor="#000" :activeStyle="{ color: '#000', fontWeight:'600'}"
					:itemStyle="{width:'calc(33% - 40rpx)',height:'40px',whiteSpace:'nowrap'}" :scrollable="true"
					:list="tabs" @change="getfind"></u-tabs>
			</view>
		</u-sticky>
		<view class="content">
			<block v-for="(item,i) in list" :key="i">
				<view class="item" @click="gotopage(item)">
					<view class="top dfc">
						<view class="number u-line-1">
							订单编号：{{item.order_sn||item.ordersn}}</view>
						<view v-if="status !== 0" :style="{ background: item.paystatus === 0 ? '#468EFF' : '#E9ECF2',color: item.paystatus === 0 ? '#fff' : ''}" class="status">{{item.status_text}}</view>
					</view>
					<view class="item-cont dfc">
						<view class="boximg">
							<image :src="item.thumb||item.img" mode="widthFix"></image>
						</view>

						<view class="cont">
							<view class="maintitle">{{item.title}} <text class="bs"
									v-if="status==5">#{{item.code+'/'+item.all_count}}</text> </view>
							<view class="title">创作者:{{item.mer_name}}</view>
							<view class="price" v-show="status == -1">
								<view><text class="rmb">¥</text>{{item.money||0}}</view>
								<!-- <text>x{{item.goods_num||1}}</text> -->
							</view>
							<view style="" style="height: 30px;width: 100%;"
								v-show="status == 3">
								<!-- <text>123</text> -->
							</view>
							<view class="price" style="color: #999999; margin: 0; font-size: 24rpx;"
								v-show="status == 3">
								<text v-if="item.to_nickname">买方昵称：{{item.to_nickname }}</text>
							</view>
							<view class="price" style="color: #000; font-size: 24rpx;" v-show="status == 0">
								<text>接收人：{{item.nickname}}</text>
							</view>
						</view>
					</view>
					<view class="order-info">
						<view class="tips" v-if="item.paytype=='wechat'&&status!=3&&item.paystatus==0&&item.create_time*1000+5*60*1000-new Date().getTime() - 60000 >0">
							<u-count-down :time="item.create_time*1000+5*60*1000-new Date().getTime()-60000"
								format="付款倒计时mm:ss" autoStart millisecond>
							</u-count-down>
						</view>
						<view class="time" v-else>
							{{status ==0 ?"转赠时间":"下单时间"}}：{{$u.timeFormat(item.create_time, 'yyyy/mm/dd hh:MM:ss')}}
						</view>
						<view class="money" v-show="status == -1">
							实付金额 <text>¥{{(item.base_money*item.goods_num).toFixed(2)}}</text>
						</view>
						<view class="price" style="color: #999999; margin: 0; font-size: 24rpx;"
							v-show="status == 3">
							<text>卖出价格:￥<text style="font-weight: 600;color: #000;">{{item.money}}</text></text>
						</view>
					</view>
					<view class="pay"
						v-if="item.paytype=='wechat'&&status!=3&&item.paystatus==0&&item.create_time*1000+5*60*1000-new Date().getTime() - 60000 >0">
						<view class="btns">
							<!-- <u-button :loading="loadings" class="btn" @click.native.stop="id=item.id,shows=true">取消订单
							</u-button> -->
							<u-button :loading="loadings" class="btn" @click.native.stop="topays(item.id,item.paytype)">
								立即付款</u-button>
						</view>
					</view>
				</view>
			</block>
			<view class="no-order" v-if="total<1&&loading">
				<!-- 	<image src="@/static/images/no-order.png" mode="aspectFill"></image>
				<view class="title">暂无订单</view> -->
				<Empty text="暂无订单" :type="2"></Empty>
			</view>
			<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
				已经到底了
			</view>
			<view class="Isend" @click="orderList" v-else-if="list.length<this.total">
				下拉加载更多
			</view>
		</view>
		<u-modal :show="shows" @confirm="GoPle" asyncClose @cancel="shows=false" title="提示" cancelColor="#A2A2A2"
			confirmColor="#00000" confirm-text="确定" show-cancel-button>
			<view style="text-align: center;">
				您确定取消该订单？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				id: '',
				status: -1,
				page: 1,
				size: 10,
				list: [],
				tabs: [{
					curr: -1,
					name: '购买订单'
				}, {
					curr: 0,
					name: '转赠记录'
				}, {
					curr: 3,
					name: '转售订单'
				}],
				total: 0,
				shows: false,
				loading: false,
				loadings: false,
			}
		},
		onShow() {
			this.page = 1
			if (this.status == -1) {
				this.orderList()
			} else if (this.status == 0) {
				this.shiftList();
			} else {
				this.getgoodList();
			}
		},
		onLoad() {},
		onPullDownRefresh() {
			this.page = 1
			if (this.status == -1) {
				this.orderList()
			} else if (this.status == 0) {
				this.shiftList();
			} else {
				this.getgoodList();
			}
		},
		onReachBottom() {
			console.log('[触底]', this.total)
			if (this.total > this.list.length) {
				if (this.status == -1) {
					this.orderList()
				} else if (this.status == 0) {

					this.shiftList();
				} else {
					this.getgoodList();
				}
			}
		},
		methods: {
			gotopage(e) {
				if (this.status < 0) {
					
					// @click="toPage(`/pages/Order/detail?id=${item.id||item.order_id}`)"
					this.toPage(`/pages/Order/detail?id=${e.order_id}&tit=${e.title}`)
				}
			},
			onBackPress(e) {
				console.log(e);
				uni.switchTab({
					url: '/pages/Mine/index'
				})
				return true; //阻止默认返回行为
			},
			getfind(e) {
				
				this.status = e.curr
				// console.log(this.status)
				this.page = 1
				uni.startPullDownRefresh()
			},
			//立即支付
			async topays(id, paytype) {

				if (id) {
					this.topay(id)
				} else {
					uni.showToast({
						title: '支付失败',
						duration: 2000,
						icon: 'none'
					});
				}


			},
			//订单列表
			async orderList() {
				let params = {
					page: this.page,
					page_size: this.size,
					order_type:1
				}
				if (this.status != -1) {
					params = {
						status: this.status,
						page: this.page,
						page_size: this.size,
					
					}
				}
				let data = await this.$http({
					url: this.$api.orderList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: params
				})
				this.loading = true
				if (this.page == 1) {
					this.list = []
				}
				console.log('[订单列表]', data)
				if (data.code == 200) {

					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data.data)
						this.page += 1
					}
				} else {
					this.total = 0
				}
			},
			async shiftList() {
				let data = await this.$http({
					url: this.$api.shiftList,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				console.log('[转增记录]', JSON.stringify(data))
				this.loading = true
				if (this.page == 1) {
					this.list = []
				}
				if (data.code == 200) {

					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data.data)
						this.page += 1
					}
				} else {
					this.total = 0
				}
			},
			async getgoodList() {
				let data = await this.$http({
					url: this.$api.orderList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
						order_type: 2
					}
				});
				this.loading = true;
				let list = data.data;
				// console.log('[转售订单]',JSON.stringify(list))
				if (this.page == 1) {
					this.list = [];
				}
				if (data.code == 200) {

					this.total = list.total;
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data);
						this.page += 1;
					}
				} else {
					this.total = 0
				}
			},
			//取消订单
			async GoPle() {
				this.loadings = true
				let data = await this.$http({
					url: this.$api.cancelOrder,
					method: 'post',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.id,
					}
				})
				this.loadings = false
				this.shows = false
				if (data.code == 200) {
					this.id = ''
					uni.$u.toast("取消成功")
					this.page = 1
					this.orderList()
				} else {
					uni.$u.toast(data.msg)
				}
			},
		},
		filters: {

			status(e) {
				switch (e) {
					case 0:
						return '待付款'
						break;
					case 1:
						return '已支付'
						break;
					case 5:
						return '已取消'
						break;
					case 6:
						return '余额支付'
						break;
					default:
						return ''
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order {
		min-height: 100vh;
		padding: 0 0 30rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;

		.Isend {
			font-size: 28rpx;
			font-weight: 400;
			color: #808080;
			line-height: 36rpx;
			text-align: center;
			margin: 16rpx;
		}

		.Tab-btn {
			background-color: $nft-page-bg-color;
		}
		
		.content {
			margin: 0 30rpx;
		}

		.item {
			position: relative;
			padding: 18rpx 34rpx 18rpx 34rpx;
			background-color: #FFFFFF;
			margin-bottom: 14rpx;
			margin-top: 30rpx;
			border-radius: 24rpx;

			.top {
				font-size: 24rpx;
				color: #8C93AA;
				line-height: 36rpx;

				.number {
					width: calc(100% - 220rpx);
				}
				.status {
					position: absolute;
					width: 104rpx;
					height: 44rpx;
					background: #468EFF;
					border-radius: 0px 24rpx 0px 20rpx;
					text-align: center;
					line-height: 44rpx;
					top: 0;
					right: 0;
				}
			}

			.item-cont {
				margin-top: 16rpx;

				.boximg {
					width: 172rpx;
					height: 172rpx;
					overflow: hidden;
					background: url(@/static/images/shopbg.png) no-repeat;
					background-size: cover;
					// border-radius: 28rpx;

					image {
						width: 172rpx;
						height: 100%;
						border-radius: 28rpx;
					}
				}

				.cont {
					margin-top: -10rpx;
					width: calc(100% - 202rpx);

					.title {
						font-size: 24rpx;
						// font-weight: 600;
						color: #8C93AA;
					}

					.maintitle {
						font-weight: 600;

						.bs {
							height: 36rpx;
							background: linear-gradient(90deg, #9C9C9C 0%, #3B3B3B 100%);
							border-radius: 4rpx;
							font-size: 20rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 36rpx;
							padding: 5rpx 10rpx;
							margin-left: 10rpx;
						}
					}

					.price {
						margin-top: 18rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #000;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.rmb {
							font-size: 24rpx;
						}
					}
				}
			}

			.order-info {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				background: #F7F8FA;
				padding: 18rpx;

				.time {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
				.tips {
					font-size: 24rpx;
					::v-deep .u-count-down__text {
						font-size: 24rpx;
						color: #FF6868;
						line-height: 34rpx;
					}
				}

				.money {
					font-size: 24rpx;
					color: #8C93AA;
					line-height: 36rpx;

					text {
						font-size: 20rpx;
						font-weight: 600;
						color: #16172F;
						margin-left: 10rpx;
					}
				}
			}

			.pay {
				// display: flex;
				// justify-content: space-between;
				.tips {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 26rpx;

					::v-deep .u-count-down__text {
						font-size: 24rpx;
						font-weight: 600;
						color: #C61515;
						line-height: 34rpx;
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 10rpx;

					::v-deep button {
						width: 180rpx;
						height: 56rpx;
						background: #468EFF;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #fff;
						margin-left: 20rpx;
						margin-right: 0;

						&:nth-child(2) {
							color: #C61515;
							border: 2rpx solid #C61515;
						}
					}
				}
			}
		}

		.no-order {
			height: calc(100vh - 60rpx);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;

			image {
				width: 460rpx;
				height: 324rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 46rpx;
				margin-top: 90rpx;
			}
		}
	}
</style>
